<template>
  <div class="set-user">
    <el-row class="flex">
      <div class="">
        <el-avatar fit="fill" :size="60" src="../../../../static/icon_default_head_man.png"></el-avatar>
      </div>
      <div class="user-info">
        <div class="flex">
          <div class="user-name">{{editUserData.realName}}</div>
          <div class="status-icon"></div>
          <div class="user-status">{{userData.newUserStatus}}</div>
        </div>
        <div class="org-role">{{userData.organizationName}} / {{userData.newRoleName}}</div>
      </div>
      <div class="button-box">
        <el-button size="mini" type="primary" plain @click="resetPassword">重置密码</el-button>
        <el-button size="mini" type="danger" plain @click="deleteUser">删除用户</el-button>
      </div>
    </el-row>
    <el-row class="flex">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;">
<!--        <el-tab-pane label="管理员标签" name="userLabel">-->
<!--          <user-relate-label :labelData="labelData" :userId="userData.userId" @getUserData="getUserData" />-->
<!--        </el-tab-pane>-->
        <el-tab-pane label="编辑资料" name="edit">
          <add-or-edit-user :editUserData="editUserData" :roleList="roleList" @uppdateUser="uppdateUser" />
        </el-tab-pane>
      </el-tabs>
      <tooltip class="tip" :tooltipOption="tooltipOption" />
    </el-row>
  </div>
</template>

<script>
import UserRelateLabel from './UserRelateLabel'
import AddOrEditUser from './AddOrEditUser'
import { CONSTANT_OBJ } from '@/utils/constant'
import api from '../api'
import { common } from '@/utils/common'
import { disposePhone } from '@/utils/util'
import { getUserCookie } from '@/utils/auth'
export default {
  components: { UserRelateLabel, AddOrEditUser },
  props: { userData: Object, roleList: Array },
  data () {
    return {
      activeName: 'edit',
      editUserData: {},
      labelData: [],
      userPhone: '',
      tooltipOption: {
        title: '帮助提示',
        options: ['1、删除管理员前必须先移除其管理的所有客户，否则无法删除管理员。', '2、管理员删除后将无法恢复，请慎重操作！']
      }
    }
  },
  mounted () {
    this.getUserData()
  },
  methods: {
    getUserData () {
      api.getUserDetailData(this.userData.userId).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          if (data.roleIdList && data.roleIdList.length) {
            data.roleId = data.roleIdList[0]
          }
          this.editUserData = data || {}
          this.labelData = data.userLabelDtos || []
        }
      })
    },
    uppdateUser () {
      this.$emit('uppdateUser', 'set')
    },
    resetPassword () {
      const { userName } = getUserCookie()
      if (userName === this.editUserData.userName) {
        this.$message({
          message: '无法重置当前已登录账户密码',
          type: 'warning'
        })
        return
      }
      common.confirmFn(`新密码将发送至管理员预留手机号${disposePhone(this.editUserData.phone)}，请及时登录修改！`, '重置密码确认').then(res => {
        if (res) {
          api.resetUserPassword(this.userData.userId).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    deleteUser () {
      const { userName } = getUserCookie()
      if (userName === this.editUserData.userName) {
        this.$message({
          message: '无法删除当前已登录账户',
          type: 'warning'
        })
        return
      }
      common.confirmFn(`确认删除 ${this.editUserData.realName}(${this.editUserData.userName})，删除后将无法恢复！`, '删除管理员确认').then(res => {
        if (res) {
          api.deleteUser(this.userData.userId).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    successFn (res, dialog) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        if (dialog) {
          this[dialog] = false
        }
        this.$emit('close')
      }
    },
    handleClick () {

    }
  }
}
</script>

<style lang="less" scoped>
.set-user {
  .user-info {
    margin-left: 30px;
  }
  .user-name {
    font-weight: bold;
    font-size: 16px;
  }
  .user-status {
    margin-left: -10px;
  }
  .status-icon {
    margin-left: 10px;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: #4bd863;
  }
  .org-role {
    margin-top: 10px;
  }
  .tip {
    position: absolute;
    top: 10px;
    left: 200px;
  }
  .button-box{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 85%;
  }
}
</style>
